<template>
  <div class="newsC">
    <div class="newsC_title">
      <span>活动详情</span></div>
    <div class="newsC_newsTitle">{{ newsData.title }}</div>
    <div style="display: flex;flex-direction: row;justify-content: center;align-items: center">
      <span class="newsC_time">{{ newsData.updateTime }}</span>
      <div class="newsC_eyes"></div>
      <span class="newsC_time">{{ newsData.checkTotal }}次</span>
    </div>
    <div class="newsC_line"></div>
    <div class="newsC_content userFlex" v-html="newsData.content " ></div>
    <div class="newsC_close" @click="closeNews"></div>
  </div>
</template>

<script>

// 新闻详情弹窗

export default {
  name: "newsDialog",
  props: {
    newsData: Object,//新闻数据
  },
  data() {
    return {}
  },
  methods: {
    closeNews() {
      this.$emit('newsDialogImp')
    }
  }
}
</script>

<style lang="scss">
.userFlex {
  /* Set the scrollbar style to auto, so the scrollbar will appear when needed */
  scrollbar-width: auto;
  /* Firefox */
  -ms-overflow-style: auto;
  /* IE 10+ */
  overflow-y: auto;
  /* Set the background color for the scrollbar track to black */
  scrollbar-color: #000000 transparent;
}

.userFlex::-webkit-scrollbar {
  /* Set the width of the scrollbar */
  width: 20px;

}

.userFlex::-webkit-scrollbar-thumb {
  /* Set the color of the scrollbar thumb (the moving part) to black */
  background-color: #000000;
}

.userFlex::-webkit-scrollbar-track {
  /* Set the color of the scrollbar track (the background behind the thumb) to black */
  background-color: #000000;
}

.newsC {
  width: 1200px;
  height: 500px !important;
  display: flex;
  position: relative;
  background-size: 100% 100%;
  background-image: url("@/assets/news/bg_news.png");
  flex-direction: column;
  margin-left: -260px;

  &_close {
    position: absolute;
    right: 60px;
    cursor: pointer;
    top: 30px;
    width: 23px;
    height: 22px;
    background-size: 100% 100%;
    background-image: url("@/assets/news/icon_closenews.png");
  }

  &_title {
    margin-left: 60px;
    width: 216px;
    height: 24px;
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-size: 100% 100%;
    background-image: url("@/assets/bg_title1.png");

    span {
      height: 24px;
      font-size: 13px;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: #FFFFFF;
      margin-left: 11px;
      line-height: 24px;
      background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  &_time {
    height: 24px;
    text-align: center;
    font-size: 10px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 24px;
  }

  &_eyes {
    width: 17px;
    height: 13px;
    margin-left: 10px;
    margin-right: 10px;
    background-size: 100% 100%;
    background-image: url("@/assets/news/icon_newseye.png");
  }

  &_line {
    margin-bottom: 10px;
    width: 90%;
    margin-left: 5%;
    height: 1px;
    background-color: #ffffff;
  }

  &_newsTitle {
    height: 24px;
    width: 100%;
    text-align: center;
    font-size: 13px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 24px;
    background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  &_content {
    background-color: #FFFFFF;
    width: 90%;
    margin-left: 5%;
    height: 360px !important;
    //overflow-y: auto;
  }
}
@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }
  .newsC {
    height: calHeight_2k(500px) !important;

    &_close {
      top: calHeight_2k(30px);
      width: calHeight_2k(23px);
      height: calHeight_2k(22px);
    }

    &_title {
      height: calHeight_2k(24px);
      margin-top: calHeight_2k(30px);

      span {
        height: calHeight_2k(24px);
        line-height: calHeight_2k(24px);
      }
    }

    &_time {
      height: calHeight_2k(24px);
      line-height: calHeight_2k(24px);
    }

    &_eyes {
      height: calHeight_2k(13px);
    }

    &_line {
      margin-bottom: calHeight_2k(10px);
      height: calHeight_2k(1px);
    }

    &_newsTitle {
      height: calHeight_2k(24px);
      line-height: calHeight_2k(24px);
    }

    &_content {
      height: calHeight_2k(360px) !important;
    }
  }
}

</style>